SJP Final Task 1 - Responsive Layout using Flex

Browser Output

View Full in New Tab

HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> SJP Responsive Flexbox Layout</title>
    <link rel="stylesheet" href="SJP-Responsive.css">
</head>
<body>

    <header class="header">
        <h1>Welcome to My Homepage</h1>
        <p>Use the menu to select different Stylesheets</p>
    </header>

    <div class="wrapper">
        <nav class="sidebar-left">
            <ul>
                <li class="active"><a href="#">Stylesheet 1</a></li>
                <li><a href="#">Stylesheet 2</a></li>
                <li><a href="#">Stylesheet 3</a></li>
                <li><a href="#">Stylesheet 4</a></li>
                <li><a href="#">No Stylesheet</a></li>
            </ul>
        </nav>

        <main class="content">
            <h2>Same Page Different Stylesheets</h2>
            <p>This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following links: </p>
               <p>  <a href="#">Stylesheet1</a>, <a href="#">Stylesheet2</a>, <a href="#">Stylesheet3</a>, <a href="#">Stylesheet4</a>. </p>
            
            <h3>No Styles</h3>
            <p>This page uses DIV elements to group different sections of the HTML page. Click here to see how the page looks like with no stylesheet: <br>
            <a href="#">No Stylesheet</a>.</p>
        </main>

        <aside class="sidebar-right">
            <h4>Side-Bar</h4>    
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quidem, neque illo at quasi dolore odio ut voluptates asperiores nobis et! Voluptatum magni facere optio sunt sapiente ullam non eos.</p>
        </aside>
    </div>

    <footer class="footer">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam, esse eius, vero illum voluptatum doloribus repellat odit voluptates rerum veritatis iste quas incidunt numquam sint tempore eaque laborum obcaecati debitis!lorem
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste vitae omnis tempora eveniet esse quia voluptates porro, autem reprehenderit! Accusantium eaque, fugit et sed unde ex nisi illum mollitia ullam?</p>
    </footer>

</body>
</html>

CSS Code

View Code Picture

    * {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    margin: 0 auto;
    color: #333;
    line-height: 1.5;
}

.p {
    margin: 20px;
}


.header {
    background-color: #00a86b;
    color: white;
    padding: 20px;
    margin-bottom: 20px;
    
}

.header h1 {
    margin: 0;
}

.header p {
    margin: 5px 0 0 0;
}


.sidebar-left ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-left li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    background-color: #f4f4f4;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.sidebar-left li.active a {
    background-color: #00a86b;
    color: white;
    border-color: #00a86b;
}

.sidebar-left li.active a:hover {
    background-color: #00a86b;
}

.sidebar-left li a:hover {
    background-color: #e0e0e0;
}


.content a {
    color: #333;
}

.sidebar-right {
    background-color: #3498db;
    color: white;
    margin-right: 10px;
    padding: 20px;
    border-radius: 5px;
}

.sidebar-right h4 {
    margin-top: 0;
    padding: 10;
}


.footer {
    background-color: #f4f4f4;
    padding: 15px;
    margin-top: 20px;
    text-align: center;
    border: 1px solid #ddd;
    margin-left: 10px;
    margin-right: 10px;
}



.wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; 

}

.sidebar-left {
    flex: 2; 
}

.content {
    flex: 4; 
    
}

.sidebar-right {
    flex: 1.5; 
}


@media screen and (max-width: 900px) {
    .sidebar-left {
        flex: 1; 
    }

    .content {
        flex: 2; 
        padding: 5px; 

    }

    .sidebar-right {
        flex: 0.5; 
    }
}


@media screen and (max-width: 600px) {
    .wrapper {
        flex-direction: column; 
    }

    .content {
        padding: 10px; 
    }

     .sidebar-left,

    .sidebar-left,
    .content,
    .sidebar-right {
        flex: 1; 
        margin-top: 10px; 
    }
}

FinalTask 1: Responsive Layout using Flex